﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>商城首页</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <script src="/jslib/template-web.js"></script>
    <style>
        #macy {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .item {
            border-radius: 3px;
            overflow: hidden;
            text-align: center;
            background-color: white;
            display: flex;
            flex-direction: column;
            justify-content: end;
            padding: 10px 0;
            width: 48%;
            margin-top: 10px;
        }

        .itemimg {
            display: inline-block;
            width: 100%;
            max-width: 100%;
            height: auto;
            background-color: #ffffff;
        }

        .price {
            color: #EE5555;
        }

        .price2 {
            margin-left: 20px;
            text-decoration: line-through;
        }

        .category-top {
            border-bottom: 1px solid #e8e8e8;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            z-index: 1;
            background: #F6F6F9
        }

        /* input[type="search"]::-webkit-search-cancel-button {
            display: none;
        } */


        .goodsname {
            display: inline-block;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body ontouchstart class="page-bg">
    <div class="wy-content page-bd-15">
        <div class="category-top">
            <header class='weui-header'>
                <div class="weui-search-bar" id="searchBar">
                    <form id="searchForm" class="weui-search-bar__form" action="JavaScript：return true;">
                        <div class="weui-search-bar__box">
                            <i class="weui-icon-search"></i>
                            <input type="search" confirm-type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索您想要的商品">
                            <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                        </div>
                        <label class="weui-search-bar__label" id="searchText"
                            style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                            <i class="weui-icon-search"></i>
                            <span>搜索您想要的商品</span>
                        </label>
                    </form>
                    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
                </div>
            </header>
        </div>
        <div style="height:45px;"></div>
        <div class="slide" id="slide2">

        </div>

        <h4 class="weui-media-box__title" style="margin-top:10px;">商品列表</h4>
        <div id="macy">

        </div>

        <div class="weui-loadmore" id="more">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
        </div>
        <div style="height: 55px;"></div>
    </div>
    <div id='tb' class="weui-tab" style="height:auto;">
        <div class="weui-tabbar tab-bottom">
            <a href="index.html" class="weui-tabbar__item">
                <i class="icon icon-27 f27 weui-tabbar__icon"></i>
                <p class="weui-tabbar__label f-green">商城</p>
            </a>
            <a href="cart/index.html" class="weui-tabbar__item">
                <span style="display: inline-block;position: relative;">
                    <i class="icon icon-28 f27 weui-tabbar__icon"></i>
                    <span id="cartcount" class="weui-badge"
                        style="position: absolute;top: -2px;right: -13px;display:none;">8</span>
                </span>
                <p class="weui-tabbar__label">购物车</p>
            </a>
            <a href="mine.html" class="weui-tabbar__item ">
                <i class="icon icon-30 f27 weui-tabbar__icon"></i>
                <p class="weui-tabbar__label ">我的</p>
            </a>
        </div>
    </div>
</body>

</html>

<script type="text/template" id="bannerlisttemp">
    <ul>
        {{each list item }}
        <li>
            <a href="{{item.LinkUrl}}">
                <img src='{{item.ImgUrl}}' alt="">
            </a> 
        </li>
        {{/each}} 
    </ul>
    <div class="dot">
        {{each list item }}
        <span></span>
        {{/each}}
    </div>
</script>
<script type="text/template" id="goodslisttemp">
    {{each list item}}
    <div class="item" data-goodsid="{{item.GoodsId}}">
        <img class="itemimg" src="{{item.GoodsMainPic}}">
        <div class="page-hd-desc goodsname">{{item.GoodsName}}</div>
        <div class="page-hd-title"><span class="price">{{item.GoodsRetailPrice}}</span><span class="price2">{{item.GoodsMarketPrice}}</span></div>
    </div>
    {{/each}}
</script>
<script>

    lobsterh5.main({
        data: {
            page: 1, limit: 10, hasemore: true,
            searchkey: ''
        },
        //初始化页面
        pageload: function () {
            this.initevent();
            this.getgoodslist();
            this.getbannerlist();
            if (lobsterh5.hasLogin()) {
                this.getcartcount();
            }
            $("#macy").on("click", ".item", function () {
                location.href = "goods/detail.html?goodsid=" + $(this).data("goodsid");
            })

        },
        getbannerlist() {
            lobsterh5.GET("/lowcode/APP20200616102057595/shop/?fun=mall.getbannerlist&workid=" + lobsterh5.GetWorkId(), {

            }).then(res => {
                var html = template("bannerlisttemp", { list: res.bannerlist, });
                $("#slide2").append(html);
                $('#slide2').swipeSlide({
                autoSwipe: true,//自动切换默认是
                speed: 3000,//速度默认4000
                continuousScroll: true,//默认否
                transitionType: 'cubic-bezier(0.22, 0.69, 0.72, 0.88)',//过渡动画linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier
                lazyLoad: true,//懒加载默认否
                firstCallback: function (i, sum, me) {
                    me.find('.dot').children().first().addClass('cur');
                },
                callback: function (i, sum, me) {
                    me.find('.dot').children().eq(i).addClass('cur').siblings().removeClass('cur');
                }
            });
            })
        },
        getgoodslist: function () {
            var self = this;
            if (!self.data.hasemore) return;
            $("#more").show();
            lobsterh5.GET("/lowcode/APP20200616102057595/shop/?fun=mall.getgoodslist&workid=" + lobsterh5.GetWorkId(), {
                searchkey: self.data.searchkey,
                classId: -1,
                sortkey: '',
                page: self.data.page,
                limit: self.data.limit
            }).then(res => {
                var html = template("goodslisttemp", { list: res, });
                $("#macy").append(html);
                if (res.length < self.data.limit) {
                    self.data.hasemore = false;
                    $("#more").text("没有更多了");
                } else {
                    $("#more").hide();
                    self.data.page++;
                }
            }).catch(res => {
                $.toast(res.msg, 'forbidden');
            })
        },
        getcartcount() {
            var self = this;
            lobsterh5.GET("/lowcode/APP20200616102057595/shop/?fun=mall.getcartcount", {
                userId: localStorage.getItem("userId")
            }).then(res => {
                var cartcount = res.cartcount;
                if (cartcount > 0)
                    $("#cartcount").text(cartcount).show();
            }).catch(res => {
            })
        },
        //初始化事件
        initevent: function () {
            var self = this;
            $(window).scroll(
                self.debounce(
                    function () {
                        let pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);
                        let viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
                        let scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
                        if (pageHeight - viewportHeight - scrollHeight < 50) {
                            self.getgoodslist();
                        }
                    }), 1000);
            $('#searchForm').on('submit', function (event) {
                //拦截表单默认提交事件
                event.preventDefault();
                //获取input框的值，用ajax提交到后台
                self.data.searchkey = $('#searchInput').val();
                self.data.page = 1;
                self.data.hasemore = true;
                $("#macy").html("");
                self.getgoodslist();
            });
            $("#searchInput").focus(function(){
                $("#tb").hide();
            }).blur(function(){
                $("#tb").show();
            });
            $('#slide2').swipeSlide({
                autoSwipe: true,//自动切换默认是
                speed: 3000,//速度默认4000
                continuousScroll: true,//默认否
                transitionType: 'cubic-bezier(0.22, 0.69, 0.72, 0.88)',//过渡动画linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier
                lazyLoad: true,//懒加载默认否
                firstCallback: function (i, sum, me) {
                    me.find('.dot').children().first().addClass('cur');
                },
                callback: function (i, sum, me) {
                    me.find('.dot').children().eq(i).addClass('cur').siblings().removeClass('cur');
                }
            });
        },
        debounce: function (fn, interval) {
            let timer = null; // 定时器
            return function () {
                // 清除上一次的定时器
                clearTimeout(timer);
                // 拿到当前的函数作用域
                let _this = this;
                // 拿到当前函数的参数数组
                let args = Array.prototype.slice.call(arguments, 0);
                // 开启倒计时定时器
                timer = setTimeout(function () {
                    // 通过apply传递当前函数this，以及参数
                    fn.apply(_this, args);
                    // 默认300ms执行
                }, interval || 300)
            }
        },
    }, false)
</script>